<template>
  <div class="app-container">
    <img class="vuex" src="@/assets/image/Todos/1639972208507664.png" alt="" />
    <el-card class="box-card el-mai-box">
      <!-- Header 区域 -->
      <my-header title="购物车案例"></my-header>

      <!-- 商品 Item 项组件 -->
      <my-goods
        v-for="item in cart"
        :key="item.id"
        :id="item.id"
        :title="item.goods_name"
        :thumb="item.goods_img"
        :price="item.goods_price"
        :count="item.goods_count"
        :state="item.goods_state"
        @stateChange="getState"
        @countChange="getCount"
      ></my-goods>

      <!-- Foote 区域 -->
      <my-footer></my-footer>
    </el-card>
  </div>
</template>

<script>
import MyHeader from '@/components/Day/Day7/MyHeader.vue'
import MyFooter from '@/components/Day/Day7/MyFooter.vue'
import MyGoods from '@/components/Day/Day7/MyGoods.vue'
import { mapState } from 'vuex'
export default {
  name: 'Day7App',
  created() {
    // 发起ajax请求
    this.$store.dispatch('Day7Shoppin/getCartList')
  },
  methods: {
    // 商品的选中状态发生了变化
    getState(e) {
      // {id: 1, value: false}
      // console.log(e)
      this.$store.commit('Day7Shoppin/updateState', e)
    },
    // 商品的数量发生了变化
    getCount(e) {
      // {id: 1, value: 2}
      // console.log(e)
      this.$store.commit('Day7Shoppin/updateCount', e)
    }
  },
  computed: {
    ...mapState('Day7Shoppin', ['cart'])
  },
  components: {
    MyHeader,
    MyFooter,
    MyGoods
  }
}
</script>

<style lang="less" scoped>
.app-container {
  box-sizing: border-box;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  width: 70%;
  height: 1000px;
  padding: 25px 0;
  // padding: 46px 0 50px 0;
  .box-card {
    height: 100% !important;
    overflow: scroll !important;
  }
  .vuex {
    position: absolute;
    top: -117px;
    left: 182px;
    z-index: 999;
  }
}
</style>
